<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
			.a {
				width: 300px;
				height: 300px;
				background-color: hotpink;
				margin: 0 auto;
			}
		
			.a h3 {
				padding: 10px 20px;
			}
			.b {
				width: 400px;
				height: 400px;
				background-color: yellow;
				margin: 0 auto;
			}
			
			
			</style>
	</head>
	<body>特性一：
	<br>
		  <div class="a">
		  	<h3>1.浮动的元素会脱离标准流，移动到指定位置</h3>
		  	<h3>2.浮动的盒子不再保留原先位子</h3>
		  	<h3>3.如果前面的盒子浮动，后面的盒子不浮动，则会压住后面的盒子</h3>
		  </div>
		  特性二：
		  <br>
		  <div class="a">
		  	<h3>1.多个盒子设置浮动，会按属性值在一行内顶端对齐排列</h3>
		  	<h3>2.浮动的盒子贴在一起没有空隙</h3>
		  	<h3>3.如果父元素宽度装不下多个浮动的盒子，则盒子会另起一行对齐</h3>
		  </div>
		  特性三：
		  <br>
		  <div class="b">
		  	<h3>1.任何元素都可以添加浮动，不管以前是什么模式的元素，添加浮动后都会具有行内块元素的相似特性</h3>
		  	<h3>2.浮动的盒子贴在一起没有空隙</h3>
		  	<h3>3.块级元素如果没设置宽度则和父元素一样宽，但是添加了浮动后大小由内容决定，即行内块相应特性</h3>
			<h3>3.浮动的盒子贴在一起没有空隙，紧挨在一起显示</h3>
			<h3>4.行内元素同理</h3>
		  </div>
		  <h1>如果要在页面中间显示浮动的盒子，一般都是搭配标准流的父元素来约束浮动盒子的位子，即上下布局父元素采用标准流，之后内部左右子元素采用浮动来布局，这是网页布局的基本思想</h1>
		  <h1>浮动的盒子只会影响后面的标准流，不会影响前面的，浮动切记一浮全浮，否则布局会乱</h1>
		  <h1>浮动的盒子不会有外边距塌陷的问题</h1>
		  
	</body>
</html>
